<template>
    <div class="search-container">
        <div class="header">
              <el-button  @click="fanhui()" class="back-btn">返回</el-button>
            <div class="header-title">
                <h2>搜索</h2>
            </div>
            <div class="header-actions">
                <span class="close-icon" @click="closeSearch">×</span>
            </div>
        </div>
        <div class="search-input-box">
            <input type="text" placeholder="你想去哪儿?" v-model="searchText" class="search-input custom-input">
<!--            <el-input-->
<!--                placeholder="你想去哪儿?"-->
<!--                prefix-icon="el-icon-search"-->
<!--                class="search-input custom-input"-->
<!--                v-model="searchText"-->
<!--            />-->
        </div>
        <div class="search-history-section">
            <div class="history-title">
                <span>搜索历史</span>
                <span class="delete-all" @click="deleteAllHistory">删除全部</span>
            </div>
            <div class="history-list">
                <div class="history-item" v-for="(item, index) in filteredHistoryList" :key="index" @click="selectHistory(item)">
                    <img :src="item.image" alt="history" class="history-item-img">
                    <div class="history-item-info">
                        <p class="location">{{ item.location }}</p>
                        <p class="details">{{ item.details }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            searchText: '',
            historyList:[
                {
                    image: 'https://desk-fd.zol-img.com.cn/t_s960x600c5/g2/M00/02/00/Cg-4WVVxDyCIKnU-AAQxnMGr9K0AAEryAA_QZEABDG0238.jpg', // 替换为实际图片地址
                    location: '伦敦London',
                    details: '1间 - 2人\n12 - 22 3月'
                },
                {
                    image: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.9Kw-HtIOCE48e2c2zrXLpAHaEo?rs=1&pid=ImgDetMain', // 替换为实际图片地址
                    location: '巴黎Paris',
                    details: '1间 - 2人\n12 - 22 3月'
                },
                {
                    image: 'https://img1.qunarzz.com/travel/poi/1505/e4/18fdf20f5edf1e.jpg', // 替换为实际图片地址
                    location: '东京Tokyo',
                    details: '1间 - 2人\n12 - 22 3月'
                },
                {
                    image: 'https://img1.pconline.com.cn/piclib/200906/15/batch/1/35358/12450297668892ql6x9sgvx.jpg',
                    location: '夏威夷Hawaii',
                    details: '1间 - 2人\n12 - 22 3月'
                }
            ]
        };
    },
    computed: {
        filteredHistoryList() {
            if (!this.searchText) {
                return this.historyList;
            }
            return this.historyList.filter(item =>
                    item.location.toLowerCase().includes(this.searchText.toLowerCase()) ||
                    item.details.toLowerCase().includes(this.searchText.toLowerCase())
            );
        }
    },
    methods: {
        closeSearch() {
            // 关闭搜索页面的逻辑，比如返回上一页
            console.log('关闭搜索页面');
            this.$router.push('/i');
        },
        deleteAllHistory() {
            this.historyList = [];
            console.log('删除所有搜索历史');
        },
        selectHistory(item) {
            // 选择搜索历史项的逻辑，比如填充搜索框等
            this.searchText = item.location;
            console.log('选择搜索历史:', item.location);
        },
      fanhui(){
        this.$router.push('homepage');
      }

    }
};
</script>

<style scoped>
.search-container {
              padding: 20px;
              background-color: #fff;
          }
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.header-title {
    flex: 1;
    text-align: center;
}
.header-actions {
    flex: 0;
}
.close-icon {
             font-size: 24px;
             cursor: pointer;
         }
.search-input-box {
                      position: relative;
                      margin-bottom: 20px;
                  }
.search-input {
              width: 85%;
              padding: 15px;
              border: 1px solid #ccc;
              border-radius: 5px;
              padding-left: 40px;
          }
.search-icon {
              position: absolute;
              left: 15px;
              top: 50%;
              transform: translateY(-50%);
              font-size: 20px;
              color: #999;
          }
.custom-input{
    border-radius: 25px; /* 圆角 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 底部阴影 */
}

.search-history-section {
                        width: 100%;
                    }
.history-title {
               display: flex;
               justify-content: space-between;
               align-items: center;
               margin-bottom: 10px;
               color: #333;
           }
.delete-all {
              color: #00c6ff;
              cursor: pointer;
          }
.history-list {
               display: flex;
               flex-wrap: wrap;
               justify-content: space-between;
           }
.history-item {
               width: 32%;
               margin-bottom: 20px;
               background-color: #f4f4f4;
               border-radius: 5px;
               overflow: hidden;
               cursor: pointer;
           }
.history-item-img {
                      width: 100%;
                      display: block;
                  }
.history-item-info {
                      padding: 10px;
                  }
.location {
    font-size: 16px;
    margin-bottom: 5px;
}
.details {
    font-size: 14px;
    color: #666;
}
</style>
